<template>
  <div class="shouli">
    <div class="flexC" style="padding: 0 4rem;margin-top: 2rem;">
      <ul class="Inv_ula flex AlignItemsC JustifyContentC colorF font_s22 textC">
        <li class="flex1 title_item">序号</li>
        <li class="flex4 Item_Hover title_item">
          <p>受理中心名称<span style="font-size: 16px;color: #04a5ff;">▼</span></p>
          <ul class="select_box font_S20 superviseList" style="width:12%;">
            <li @click="handle()">查看全部</li>
            <li v-for="(item, index) in dict" :key="index" @click="getCodeInfo(item)">{{ item.name }}</li>
          </ul>
        </li>
        <li class="flex3 title_item">地址</li>
        <li class="flex2 title_item">电话</li>
        <li class="flex2 title_item">联系人</li>
        <li class="flex2 title_item">联系电话</li>
      </ul>
      <div style="height: 54vh;" class="superviseList font_s20">
        <ul class="Inv_ulb flex colorF textC" v-for="(item, index) in dataList" :key="'list' + index">
          <li class="flex1">{{ index + 1 }}</li>
          <li class="flex4">{{ item.jgmc }}</li>
          <li class="flex3">{{ item.jgdz }}</li>
          <li class="flex2">{{ item.dh }}</li>
          <li class="flex2">{{ item.gly }}</li>
          <li class="flex2">{{ item.lxdh }}</li>
        </ul>
      </div>
    </div>
    <!-- 条件查询没有符合条件的数据时显示提示信息 -->
    <div class="messageBoxStyle FontWeightB font_s28" v-show="showErrorMessage">
      <p>没有符合条件的数据</p>
    </div>
    <!-- 数据加载中的提示信息 -->
    <div class="messageBoxStyle FontWeightB font_s28" v-show="showWaitingMessage">
      <p>数据加载中，请等待...</p>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 将请求到的字典表的数据赋值给本地数组
      dict: [],
      // 将接口请求到的数据赋值给本地的数组
      dataList: [],
      // 通过post请求数据的接口
      jdCode: '',
      // 无符合筛选条件显示内容
      showErrorMessage: false,
      showWaitingMessage: false
    }
  },
  created () {
    this.handle()
  },
  methods: {
    handle () {
      this.dataList = []
      if (this.dataList.length === 0) {
        this.showWaitingMessage = true
      }
      // 请求列表的数据
      this.$http.get(this.$api.JbjgList.jbjgList, true).then(result => {
        this.dataList = result.data.result
        if (this.dataList.length === 0) {
          this.showErrorMessage = true
          this.showWaitingMessage = false
        } else {
          this.showWaitingMessage = false
        }
      })
      // 请求字典表中筛选条件的数据
      this.$http.get(this.$api.QueryDict.queryDict, true).then(result => {
        let temp = result.data.result
        for (let i = 0; i < temp.length; i++) {
          if (temp[i].description === 'JD_CODE') {
            this.dict.push(temp[i])
          }
        }
      })
    },
    // 点击筛选调教发起数据请求
    postData () {
      this.dataList = []
      if (this.dataList.length === 0) {
        this.showWaitingMessage = true
      }
      this.$http.post(this.$api.JbjgList.jbjgList, 'jdCode=' + this.jdCode, true).then(result => {
        // 将筛选结果的数据赋值到本地数组
        this.dataList = result.data.result
        if (this.dataList.length === 0) {
          this.showErrorMessage = true
          this.showWaitingMessage = false
        } else {
          this.showWaitingMessage = false
        }
      })
    },
    // 点击筛选条件并传递参数
    getCodeInfo (codeInfo) {
      this.jdCode = codeInfo.code
      this.postData()
    }
  }
}
</script>

<style lang="scss" scoped>
.shouli {
  width: 100%;
  height: 100%;
  .Inv_ul {
    width: 100%;
    height: 4.375rem;
    color: rgba(255, 255, 255, 0.5);
    font-weight: bold;
    margin: 1.285rem auto 0.825rem;
  }
  .Inv_ula {
    width: 100%;
    font-weight: bold;
    border: 1px solid rgba(0, 255, 255, 1);
    overflow: hidden;
    box-sizing: border-box;
    .title_item {
      height: 2.825rem;
      line-height: 2.825rem;
    }
    .Item_Hover {
      cursor: pointer;
      .select_box {
        border: 1px solid #ffffff;
        padding: 0.25rem 1.625rem;
        background: #1d3843;
        position: absolute;
        left:19%;
        display: none;
        height: 50%;
        overflow: auto;
      }
    }
    .Item_Hover:hover .select_box  {
      display: block;
    }
  }
  .Inv_ulb {
    width: 100%;
    font-weight: bold;
    li {
      padding: 0.625rem 0;
    }
  }
  .superviseList {
    overflow-x: hidden;
    overflow-y: auto;
  }
  .superviseList::-webkit-scrollbar {
    width: 6px;
    border-radius: 10px;
    background: rgba($color: #fff, $alpha: 0.6);
  }
  .superviseList::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba($color: #fff, $alpha: 1);
  }
  .Inv_ulb:nth-child(even) {
    background: rgba(0, 255, 255, 0.1);
  }
  .category {
    color: #30dfff;
  }
}
</style>
